<template>
	<view>
		<view class="form">
			<view class="list webkit">
				<view class="label">收货人</view>
				<input class="flex" type="text" @input="realname" placeholder="请填写收货人姓名" :value="res.realname" />
			</view>
			<view class="list webkit">
				<view class="label">联系电话</view>
				<input class="flex" type="text" @input="mobile" placeholder="请填写联系电话" :value="res.mobile" />
			</view>
			<view class="list webkit">
				<view class="label">所在地区</view>
				<button class="flex button" type="default" @click="showMulLinkageThreePicker" style="background: #fff;" v-cloak>{{address}}</button>
			</view>
			<view class="list webkit">
				<view class="label">所在街道</view>
				<input class="flex" type="text" @input="street" placeholder="所在街道" :value="res.street" />
			</view>
			<view class="list webkit">
				<view class="label">详细地址</view>
				<input class="flex" type="text" @input="addr" placeholder="街道,楼牌号等" :value="res.address" />
			</view>
		</view>
		<view class="sub">
			<button class="btn" type="primary" style="background-color: #7C2548;" @click="sub">保存地址</button>
		</view>
		<mpvue-picker :themeColor="themeColor" ref="mpvuePicker" :mode="mode" :deepLength="deepLength" :pickerValueDefault="pickerValueDefault"
		 @onConfirm="onConfirm" @onCancel="onCancel" :pickerValueArray="pickerValueArray"></mpvue-picker>
		<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault"
		 @onCancel="onCancel" @onConfirm="onConfirm"></mpvue-city-picker>
	</view>
</template>
<script>
	
	import mpvuePicker from '../../../components/mpvue-picker/mpvuePicker.vue';
	import mpvueCityPicker from '../../../components/mpvue-citypicker/mpvueCityPicker.vue'
	import cityData from '../../../common/city.data.js';
	import city from '../../../components/mpvue-citypicker/city-data/city.js';
	import area from '../../../components/mpvue-citypicker/city-data/area.js';
	import province from '../../../components/mpvue-citypicker/city-data/province.js';
	import asd from '../../../components/mpvue-citypicker/city-data/asd.js';
	
	export default {
		components: {
			mpvuePicker,
			mpvueCityPicker
		},
		data() {
			return {
				res:[],
				mulLinkageTwoPicker: cityData,
				city:city,
				area:area,
				asd:asd,
				province:province,
				cityPickerValueDefault: [0, 0, 0],
				themeColor: '#007AFF',
				pickerText: '',
				mode: '',
				deepLength: 1,
				pickerValueDefault: [0],
				pickerValueArray:[],
				address:'-请选择地区-',
				datavalue:'',
				submit:{},
				openid:''
			};
		},
		onLoad:function(e){
			this.goodsid = e.goodsid
			this.optionid = e.optionid
			this.total = e.total
			// console.log(e.id)
			if(e.id != 'undefined' &&e.id != undefined){
				uni.showLoading()
				uni.setNavigationBarTitle({
					title: '编辑地址'
				})
				this.id = e.id
				uni.getStorage({
					key: 'openid',
					success: (res) => {
						this.openid = res.data
						this.setAjax()
					},
					fail: () => {
						uni.navigateTo({
							url: '../../login/login'
						});
					}
				});
			}else{
				uni.getStorage({
					key: 'openid',
					success: (res) => {
						this.openid = res.data
					},
					fail: () => {
						uni.navigateTo({
							url: '../../login/login'
						});
					}
				});
			}
		},
		methods:{
			setAjax(){
				uni.request({
					url: 'https://bhh.ax1319.com/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=member.address.post&app=1&id='+this.id,
					method: 'POST',
					data: {'openid':this.openid},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						uni.hideLoading()
						this.res = res.data
						this.address = this.res.province+'-'+this.res.city+'-'+this.res.area
						this.submit.realname = res.data.realname
						this.submit.mobile = res.data.mobile
						this.submit.address =res.data.address
						this.submit.areas = res.data.province + ' ' + res.data.city + ' ' + res.data.area
						this.submit.street =res.data.street
						this.submit.datavalue =res.data.datavalue
					},
					fail: () => {},
					complete: () => {}
				});
			},
			onCancel(e) {
			},
			showMulLinkageThreePicker() {
				this.$refs.mpvueCityPicker.show()
			},
			onConfirm(e) {
				this.address = e.label
				var pro = e.value[0]
				var city = e.value[1]
				var area = e.cityCode
				this.submit.datavalue = this.province[pro].value + '0000 ' + this.city[pro][city].value + '00 ' +area
				var a = e.label.split("-")
				a = a[0] + ' ' + a[1] + ' ' + a[2]
				this.submit.areas = a
			},
			sub(){
				var id = ''
				if(this.id != undefined){
					id = '&id='+this.id
				}
				if(this.submit.realname == undefined){
					uni.showToast({
						title: '请输入收货人',
						icon:"none"
					});
				}else if(this.submit.mobile == undefined){
					uni.showToast({
						title: '请输入联系电话',
						icon:"none"
					});
				}else if(this.submit.address == undefined){
					uni.showToast({
						title: '请选择城市',
						icon:"none"
					});
				}else if(this.submit.areas == undefined){
					uni.showToast({
						title: '请输入街道',
						icon:"none"
					});
				}else if(this.submit.street == undefined){
					uni.showToast({
						title: '请输入街道',
						icon:"none"
					});
				}else{
					uni.showLoading()
					uni.request({
						url: 'https://bhh.ax1319.com/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=member.address.submit&app=1'+id,
						method: 'POST',
						data: {
							'openid':this.openid,
							'addressdata[realname]' :this.submit.realname,
							'addressdata[mobile]' :this.submit.mobile,
							'addressdata[address]' :this.submit.address,
							'addressdata[areas]' :this.submit.areas,
							'addressdata[street]' :this.submit.street,
							'addressdata[datavalue]' :this.submit.datavalue
							},
						header:{'Content-Type':'application/x-www-form-urlencoded'},
						success: res => {
							uni.hideLoading()
							if(res.data.status == 1){
								uni.showToast({
									title: '保存成功'
								});
								console.log(this.goodsid)
								setTimeout(() => {
									if(this.goodsid!= undefined){
										uni.navigateTo({
											url: '/pages/order/create/create?id='+this.goodsid+'&optionid='+this.optionid+'&total='+this.total
										});
									}else{
										uni.navigateTo({
											url: '/pageA/member/address/address'
										});
									}
								}, 1500);
							}
						},
						fail: () => {},
						complete: () => {}
					});
				}
			},
			realname(e){
				this.submit.realname = e.detail.value
			},
			mobile(e){
				this.submit.mobile = e.detail.value
			},
			addr(e){
				this.submit.address = e.detail.value
			},
			street(e){
				this.submit.street = e.detail.value
				
			}
		},
			onBackPress() {
			  if (this.$refs.mpvuePicker.showPicker) {
				this.$refs.mpvuePicker.pickerCancel();
				return true;
			  }
			  if (this.$refs.mpvueCityPicker.showPicker) {
				this.$refs.mpvueCityPicker.pickerCancel();
				return true;
			  }
			},
			onUnload() {
				if (this.$refs.mpvuePicker.showPicker) {
					this.$refs.mpvuePicker.pickerCancel()
				}
				if (this.$refs.mpvueCityPicker.showPicker) {
					this.$refs.mpvueCityPicker.pickerCancel()
				}
			}
	}
</script>

<style>.list{padding:24upx;background:#fff;position:relative;}.list .label{width:154upx;color:#666;}.list:before{content:" ";position:absolute;left:20upx;right:20upx;bottom:-2upx;height:2upx;border-top:2upx solid #ebebeb;color:#D9D9D9;-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;-webkit-transform:scaleY(0.5);-ms-transform:scaleY(0.5);transform:scaleY(0.5);}.button{background:#fff;font-size:28upx;margin:0;padding:0;line-height:52upx;width:100%;text-align:left;}.button.button-hover{background:#fff;}.button:after{display:none;}.sub{padding:50upx 16upx;}.btn{background:#f55;}</style>